<template>
    <div class="hinput hclear">
        <i class="iconfont" :class="iconClass"></i> <input :type="type" :value="currentValue" @input="handleInput" :placeholder="placeholder" :maxlength="maxlength" required="required">
    </div>
</template>

<script>
export default {
    props: {
        icon: {
            type: String
        },
        placeholder: {
            type: String
        },
        maxlength: {
            type: Number
        },
        value:{
            
        },
        type:{
            type: String,
            default:"text"
        }
    },
    data(){
        return{
            currentValue: this.value //将prop属性绑定到data属性上，以便修改prop属性（Vue不允许直接修改prop属性的值）
        }
    },
    //
    computed: {
        iconClass() {
            return this.icon ? "icon-" + this.icon : "";
        }
    },
    methods: {
        handleInput(event) {
            var value = event.target.value;
            this.$emit("input", value); //触发 input 事件，并传入新值
        }
    }
};
</script>

<style lang="scss">
.hinput {
    i {
        float: left;
        width: rem(100);
        color: rgba(217, 217, 217, 1);
        font-size: rem(60);
        line-height: rem(92);
        height: rem(92);
        text-align: center;
    }
    input {
        float: left;
        width: rem(650);
        line-height: rem(92);
        height: rem(92);
        font-size: rem(30);
        background-color: transparent;
    }
}
</style>
